<template>
  <el-dialog title="" v-model="calcVisible" width="620" :show-close="false">
    <template #header>
      <div class="flex justify-between items-center">
        <div class="flex gap-1 items-center">
          <div
            class="w-[46px] h-[46px] flex justify-center items-center bg-[#95a5a6] rounded-[5px] shadow-[#95a5a6] shadow-sm">
            <Reel theme="outline" size="24" fill="#2c3e50" />
          </div>

          <div class="flex flex-col justify-between ml-1">
            <span class="text-lg">布线计算</span>
            <span class="text-sm text-gray-400">皖电东送淮南至上海特高压输电示范工程</span>
          </div>
        </div>

        <div
          class="w-[80px] h-[36px] flex justify-center items-center bg-[#0FBD06] shadow-[#72b16e] shadow-sm text-white text-[16px] rounded-[10px] cursor-pointer hover:bg-[#9bdbb3] active:bg-[#088601] duration-300">
          计算
        </div>
        <!-- <el-button type="success" @click="calcLine"></el-button> -->
      </div>
    </template>

    <div class="border-b flex justify-between items-center pb-1">
      <div class="flex gap-1 items-center">
        <MouseOne theme="outline" size="18" fill="#A6A6A6" />
        <span class="text-[#A6A6A6]">请选择所需导线</span>
      </div>
      <el-select v-model="wireStyle" placeholder="请选择" size="small" class="w-[120px]">
        <el-option label="未使用" :value="1" />
        <el-option label="全部" :value="2" />
      </el-select>
    </div>

    <BuWire />
    <BuWire />
    <BuWire />
    <BuWire />
    <BuWire />
    <BuWire />
    <BuWire />

    <el-pagination layout="prev, pager, next" :total="50" size="small" class="mt-4" />
  </el-dialog>
</template>

<script setup lang="ts">
import useCalcLineStore from '@/states/useCalcLineStore'
import useLineStore from '@/states/useLineStore'
import useWireStore from '@/states/useWireStore'
import { MouseOne, Reel } from '@icon-park/vue-next'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import BuWire from './CalcLineDialog/BuWire.vue'

const calcVisible = defineModel()
const { planId } = defineProps({
  planId: {
    type: Number,
    default: 1,
  },
})
const wireStore = useWireStore()
const lineStore = useLineStore()
const clacLineStore = useCalcLineStore()
const route = useRoute()

const selectWires = ref<WireModel[]>([])
const wireStyle = ref(1)
const handleSelectionChange = (val: WireModel[]) => {
  selectWires.value = val
}

async function init() {
  await lineStore.find(+route.params.id)
  await wireStore.all({ projId: lineStore.line?.projId })
}

async function calcLine() {
  await clacLineStore.calculate({
    planId,
    selectWires: selectWires.value,
  })
}
init()
</script>

<style></style>
